<template>
  <el-table
    ref="tableData"
    class="tableComponents"
    :loading="loadings"
    highlight-current-row
    :data="listData"
    border
    stripe
    style="{ width: 100% }"
    height="calc(100% - 50px)"
    @selection-change="handleSelectionChange"
    @sort-change="changeTableSort"
    @row-click="rowClick"
  >
    <el-table-column
      v-if="showSelectColumn"
      type="selection"
      align="center"
      width="60"
      :selectable="selectable"
    />
    <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80" />
    <template v-for="(propItem, index) in propList">
      <el-table-column
        v-if="propItem && !propItem.hide"
        :key="index"
        align="center"
        :prop="propItem.porp"
        :label="propItem.name"
        show-overflow-tooltip
        :sortable="sortColumn.includes(propItem.porp) ? 'custom' : false"
        :min-width="propItem.minWidth || '100'"
        :fixed="propItem.fixed ? 'right': false"
      >
        <template v-if="typePopoverStauts && !propItem.notSearch" #header>
          <TypePopover
            v-if="tableUpStauts === 1"
            :column-index="index"
            :column="propItem"
            :filter-options="propItem.typeObj.list"
            :filter-name="propItem.typeObj.listName"
            :table-up-stauts="tableUpStauts"
            @tableUpdate="Update($event, propItem.name)"
          />
        </template>
        <template #default="scope">
          <slot v-if="scope.row[scopeNo || propItem.porp]" :name="propItem.slotName" :row="scope.row" :propItem="propItem">
            <span
              v-if="propItem.type === 'date' || propItem.type === 'datetime'|| propItem.type === 'TimePicker' || propItem.type === 'datetime_range'"
            >{{ dateToFormatRt(scope.row[`${propItem.porp}`], propItem.type) | pattern }}</span>
            <span v-else-if="propItem.porps">{{ scope.row[propItem.porps][propItem.porpName || propItem.porp] | pattern }}</span>
            <span v-else>{{ scope.row[`${propItem.porpName}`] || scope.row[`${propItem.porp}`] | pattern }}</span>
          </slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import tableApi from "@/api/basic-info-manage/table-config";
import { mymixin } from "@/utils/mixins"
export default {
  filters: {
    pattern(e) {
      if (e !== undefined) {
        return e;
      } else {
        return '——';
      }
    }
  },
  mixins: [mymixin],
  props: {
    listData: {
      type: Array,
      required: true
    },
    propList: {
      type: Array,
      required: true
    },
    showIndexColumn: {
      type: Boolean,
      default: true
    },
    showSelectColumn: {
      type: Boolean,
      default: true
    },
    loadings: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10, total: 10 })
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    showEditColumn: {
      type: Boolean,
      default: true
    },
    scopeNo: {
      type: String,
      default: ''
    },
    typePopoverStauts: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      height: '',
      sortColumn: []
    }
  },
  watch: {
    listData: {
      handler () {
        this.changeSerial()
      },
      deep: true
    }
  },
  mounted () {
    // this.showEditColumn && this.loadSortColumn()
    this.changeSerial()
  },
  methods: {
    changeTableSort(column) {
      this.$emit('sortChange', column)
    },
    loadSortColumn () {
      tableApi.queryByUrl(this.$route.path).then(res => {
        this.sortColumn = res.data || []
      })
    },
    changeSerial () {
      let formLength = 10 - this.listData.length
      if (this.listData && this.listData.length >= 0 && this.listData.length < 10) {
        for (let i = 0; i < formLength; i++) {
          this.listData.push({ index: this.listData.length + 1 + '' })
        }
      }
    },
    handleSizeChange () {
      this.$emit("handleSizeChange", this.page.pageSize);
    },
    handleCurrentChange (row) {
      this.$emit("handleCurrentChange", row);
    },
    handleSelectionChange (row) {
      this.$emit("handleSelectionChange", row);
    },
    // table项是否可以被选中
    selectable (row) {
      // console.log(row)
      return !('index' in row)
    },
    dateToFormatRt(e, type) {
      if (e) {
        if (type === 'date') {
          return this.dateToFormattwo(e);
        } else if (type === 'datetime') {
          return this.dateToFormat(e);
        } else {
          return this.dateToFormat(e);
        }
      } else {
        return '——'
      }
    },
    Update(e, name) {
      console.log(e)
      this.$emit("tableUpdate", e, name);
    },
    rowClick(e) {
      this.$emit("rowClick", e);
    }
  }
};
</script>

<style scoped lang="scss">

</style>
